<template>
  <el-dialog
    title="单据明细"
    :close-on-click-modal="false"
    :visible.sync="visible"
    append-to-body
  >
    <el-form
      :model="dataForm"
      @keyup.enter.native="dataFormSubmit()"
      label-width="80px"
      class="form"
    >
      <el-form-item label="往来单位" prop="organName">
        <el-input v-model="dataForm.organName"></el-input>
      </el-form-item>
      <el-form-item label="单据日期" prop="billTime">
        <el-input v-model="dataForm.billTime"></el-input>
      </el-form-item>
      <el-form-item label="单据编号" prop="billNo">
        <el-input v-model="dataForm.billNo"></el-input>
      </el-form-item>
      <el-form-item label="付款账户" prop="accountName">
        <el-input v-model="dataForm.accountName"></el-input>
      </el-form-item>
      <el-form-item label="付款金额" prop="changeAmount">
        <el-input v-model="dataForm.changeAmount"></el-input>
      </el-form-item>
      <el-form-item label="单据备注" prop="remark">
        <el-input v-model="dataForm.remark"></el-input>
      </el-form-item>
    </el-form>
    <el-form ref="inServForm" label-width="130px" size="small" class="form1">
      <el-form-item label="" prop="servin">
        <template>
          <el-table border :data="dataList" style="width: 100%">
            <el-table-column prop="Stock" label="库存">
              <template scope="scope">
                <el-input size="mini" v-model="scope.row.Stock"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="Unit" label="单位">
              <template scope="scope">
                <el-input size="mini" v-model="scope.row.Unit"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="OperNumber" label="数量">
              <template scope="scope">
                <el-input size="mini" v-model="scope.row.OperNumber"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="UnitPrice" label="单价">
              <template scope="scope">
                <el-input size="mini" v-model="scope.row.UnitPrice"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="AllPrice" label="金额">
              <template scope="scope">
                <el-input
                  size="mini"
                  :value="Pricefloat(scope.$index)"
                  :disabled="true"
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="Remark" label="备注">
              <template scope="scope">
                <el-input size="mini" v-model="scope.row.Remark"></el-input>
              </template>
            </el-table-column>
          </el-table>
        </template>
        <div v-if="showTree" class="treeDiv" ref="tableList">
          <el-table
            @row-click="handleRegionNodeClick"
            ref="moviesTable"
            :data="memberList"
            border
            :cell-style="getCellStyle"
            :header-cell-style="getHeaderCellStyle"
            @cell-click="handleRegionNodeClick($event)"
          >
            <el-table-column
              v-for="(item, index) in Columns"
              :key="index"
              :prop="item.prop"
              :label="item.label"
              :show-overflow-tooltip="true"
            >
            </el-table-column>
          </el-table>
        </div>
      </el-form-item>
    </el-form>
    <!-- 弹窗, 新增 / 修改 -->
    <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate"></add-or-update>
  </el-dialog>
</template>

<script>
import AddOrUpdate from "./account-add-or-update";
import { isEmail, isMobile } from "@/utils/validate";
export default {
  data() {
    return {
      parentValue: [],
      value1: "",
      value2: "",
      dataFormLoading: false,
      value: "",
      visible: false,
      roleList: [],
      showTree: false,
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      dataForm: {
        organName: "",
        operTimeStr: "",
        defaultNumber: "",
        payType: "",
        totalPrice: "",
        changeAmount: "",
        discountLastMoney: "",
        accountName: "",
      },
      dataList: [],
      addOrUpdateVisible: false,
      id: null,
    };
  },
  methods: {
    handleChange(value) {
      console.log(value);
    },
    init(id) {
      console.log(id);
      this.visible = true;
      this.dataForm.id = id || 0;
      if (this.dataForm.id) {
        this.$http({
          url: this.$http.adornUrl("/accountHead/getDetailByNumber"),
          method: "get",
          params: this.$http.adornParams(
            {
              billNo: this.dataForm.id,
            },
            false
          ),
        }).then(({ data }) => {
          // console.log(data.data);
          this.id = data.data.id;
          this.dataForm = data.data;
          this.totalPage = data.data.totalCount;
          if (this.id == null) {
            // console.log(this.id)
            return;
          }
          this.$http({
            url: this.$http.adornUrl(
              `/depotItem/getDetailList?headerId=${this.id}&mpList=undefined%2Cundefined%2Cundefined`
            ),
            method: "get",
            params: this.$http.adornParams(
              {
                number: id,
              },
              false
            ),
          }).then(({ data }) => {
            console.log(data.data.rows);
            this.dataList = data.data.rows;
          });
        });
      }
    },
  },
};
</script>
<style scoped>
.form .el-form-item {
  display: inline-block;
  width: 33%;
}
element.style {
  width: 900px;
}
.el-form-item__content {
  margin-left: 0px;
}
.form1 {
  margin-left: -100px !important;
}
</style>


